import { LitElement, html } from "lit";

//这里我们定义了一个模板，它是一个接受一组变量的函数
//返回点燃的HTML模板。这实际上和渲染是一样的
//函数工作。
//
//这个函数可以定义在一个单独的，共享的，文件或只是一个漂亮的
//划分一个更大的模板。它也可以用来制造微小的组件
//不需要很多隔离，你可以为它创建一个函数
//而不是web组件。
//
//在这种情况下，我们接受一个属性，文本内容和事件处理程序
const templateFactory = (inputValue, buttonText, onSubmit) => html`
  <input id="usernameInput" value="${inputValue}" />

  <button @click="${onSubmit}">
    ${buttonText}
  </button>
`;

class TemplateFactories extends LitElement {
    static get properties() {
        return {
            username: { type: String }
        };
    }

    constructor() {
        super();

        this.username = "Steve";
        this._onUsernameSubmit = this._onUsernameSubmit.bind(this);
    }

    render() {
        return html`
      <!--
        Call the template factory with a property, string constant
        and a method reference for the event handler
      -->
      <h3>Username: ${this.username}</h3>
      ${templateFactory(
            this.username,
            "Change username",
            this._onUsernameSubmit
        )}
    `;
    }

    _onUsernameSubmit() {
        this.username = this.shadowRoot.getElementById("usernameInput").value;
    }
}

customElements.define("template-factories", TemplateFactories);
